<template>
  <div class="user">
    <div>
      <el-form :inline="true" :model="query" size="mini">
        <el-form-item label="账号">
          <el-input v-model="query.username" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="query.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="query.role" placeholder="请选择">
            <el-option
              v-for="item in roles"
              :key="item.id"
              :label="item.name"
              :value="item.id || ''"
              >{{ item.name }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="submitQuery"
            >查询</el-button
          >
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :data="tableData"
        v-loading="tableLoading"
        size="small"
        style="width: 100%"
        border
      >
        <el-table-column prop="username" label="账号" width="150"></el-table-column>
        <el-table-column prop="sys_user.name" label="姓名" width="100"></el-table-column>
        <el-table-column prop="sys_user.sex" label="性别" width="50">
          <template v-slot="scope">{{
            scope.row.sys_user && scope.row.sys_user.sex === "1" ? "男" : scope.row.sys_user && scope.row.sys_user.sex === "0" ? "女" : ""
          }}</template>
        </el-table-column>
        <el-table-column
          prop="sys_user.phone"
          label="联系电话"
          width="115"
        ></el-table-column>
        <!-- <el-table-column label="角色" width="100">
          <template v-slot="scope">
            <el-tag
              style="margin-right: 5px"
              v-for="item in scope.row.sys_roles"
              size="small"
              :key="item.id"
              >{{ item.name }}</el-tag
            >
          </template>
        </el-table-column> -->
        
      </el-table>
    </div>
    <div style="text-align: right; margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableDataTotal"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { page, create, update, userDelete } from "../../api/user";
import { query as roleQuery } from "../../api/role";
import { getUserInfoByBook } from "../../api/book/book";
import dayjs from "dayjs";
export default {
  name: "User",
  data() {
    return {
      query: { limit: 10, page: 1 },
      tableData: [{}],
      tableDataTotal: 0,
      tableLoading: true,
      editDialogShow: false,
      userForm: { roles: [] },
      userFormRules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        roles: [{ required: true, message: "请选择角色", trigger: "blur" }],
      },
      roles: [{}],
    };
  },
  created() {
    this.page();
    // this.roleQuery();
  },
  methods: {
    submitQuery() {
      this.page();
    },
    resetQuery() {
      this.query = { limit: 10, page: 1 };
      this.page();
    },
    handleSizeChange(val) {
      this.query.limit = val;
      this.page();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.page();
    },
    page() {
      this.tableLoading = true;
      getUserInfoByBook(this.$route.query)
        .then((res) => {
          if (res.success) {
            console.log(res);
            this.tableData = res.data.rows;
            this.tableDataTotal = res.data.count;
            this.tableLoading = false;
          }
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    // roleQuery() {
    //   roleQuery().then((res) => {
    //     if (res.success) {
    //       this.roles = res.data;
    //     }
    //   });
    // },
  },
};
</script>
